<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String basePath = request.getContextPath();
  Object email = request.getSession().getAttribute("email");
%>
<html>
<head>
  <title>新增商品</title>
  <jsp:include page="../common/common-css.jsp"></jsp:include>
  <jsp:include page="../common/common-js.jsp"></jsp:include>

  <style type="text/css">
    .preDesc {
      color: darkgray;
      width: 120px;
    }

    td {
      padding: 12px
    }
  </style>

</head>
<body style="background-color: #F5F5F5">
<jsp:include page="../../head.jsp"></jsp:include>
<div class="container-fluid" style="padding: 0px">
  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px">
    <div class="col-xs-0 col-sm-2 col-md-3 col-lg-4"></div>
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"
         style="background-color: #ffffff;margin: 15px 0px;padding: 0px 10px">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px" align="center">
        <img src="<%=basePath%>/img/product.png" id="productImg" class="img-responsive">
        <input type="file" onchange="uploadFile(this);" name="filePath" id="filePath"
               style="display: none">
      </div>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
           style="margin: 0px;border-top: 1px solid #eaeaea;padding: 0px">
        <table style="width: 100%;border-bottom: 1px solid #ebebeb;">
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td colspan="2">
              <input type="text" id="name" style="width: 100%;border: none"
                     placeholder="商品名称" maxlength="15">
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td colspan="2">
              <input type="text" class="NumDecText"
                     onkeyup="this.value=this.value.replace(/\D/g,'')"
                     onafterpaste="this.value=this.value.replace(/\D/g,'')"
                     style="width: 100%;border: none" id="originalPrice" placeholder="商品成本(元)"
                     maxlength="8">
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td colspan="2">
              <input type="text" class="NumDecText"
                     onkeyup="this.value=this.value.replace(/\D/g,'')"
                     onafterpaste="this.value=this.value.replace(/\D/g,'')"
                     style="width: 100%;border: none" id="price" placeholder="商品售价(元)"
                     maxlength="8">
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td colspan="2">
              <input type="text" style="width: 100%;border: none"
                     onkeyup="this.value=this.value.replace(/\D/g,'')"
                     onafterpaste="this.value=this.value.replace(/\D/g,'')" id="inventory"
                     value="${shProduct.inventory}" maxlength="8" placeholder="商品库存">
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="preDesc" style="">商品单位</td>
            <td align="right">
              <select id="unit" style="border: none">
                <option value="1">斤</option>
                <option value="2" selected>份</option>
                <option value="3" selected>台</option>
                <option value="4" selected>件</option>
                <option value="5" selected>套</option>
              </select>
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td class="preDesc" style="">商品分类</td>
            <td align="right">
              <select id="productType" style="border: none;"></select>
            </td>
          </tr>
          <tr style="border-bottom: 1px solid #ebebeb;">
            <td colspan="2">
              <textarea style="resize: none;width: 100%;border: none;padding: 0px"
                        maxlength="512" rows="5" id="remark"
                        placeholder="输入商品描述"></textarea>
            </td>
          </tr>
        </table>
        <div class="btn-group" role="group" aria-label="..."style="margin: 20px 0px">
          <button onclick="save()" class="btn btn-default-color">保&nbsp;存</button>
          <button type="button" class="btn btn-default" onclick="history.go(-1)">取&nbsp;消</button>
        </div>
      </div>
    </div>
  </div>
</div>
<input type="hidden" class="productImg">
<jsp:include page="../common/common-html.jsp"></jsp:include>
<jsp:include page="../../foot.jsp"></jsp:include>
</body>


<script language="JavaScript">
  // - 新增商品
  function save() {
    $(".btn").blur();
    var name = $.trim($("#name").val());
    var price = $("#price").val();
    var originalPrice = $("#originalPrice").val();
    var unit = $.trim($("#unit").val());
    var remark = $.trim($("#remark").val());
    var inventory = $.trim($("#inventory").val());
    var productImg = $(".productImg").val();
    var productType = $("#productType").val();
    if (name == "") {
      alerErr("输入商品名称!");
      return;
    }
    if (originalPrice == null || originalPrice == '') {
      alerErr("输入商品成本!");
      return;
    }
    if (price == null || price == '') {
      alerErr("输入商品售价!");
      return;
    }
    if (inventory == "") {
      alerErr("输入商品库存!");
      return;
    }
    if (productType == "") {
      alerErr("选择商品类别!");
      return;
    }
    if (Number(originalPrice) > Number(price)) {
      alerErr("成本价格不得高于售价!");
      return;
    }
    if (productImg == '' || productImg == '<%=basePath%>/img/product.png') {
      alerErr("选择商品图片!");
      return;
    }
    $.ajaxSetup({
      contentType: 'application/json'
    });
    var param = {
      name: name,
      price: price,
      originalPrice: originalPrice,
      unit: unit,
      productType: productType,
      remark: remark,
      inventory: inventory,
      url: productImg
    };
    var url = "<%=basePath%>/product/add";
    $.post(url, JSON.stringify(param), function (data, status) {
      aler(data);
      if (data.code == 200) {
        window.location = "<%=basePath%>/success?backUrl=<%=basePath%>/goodMgr";
      }
    })
  }
  // - 上传图片
  function uploadFile(obj) {
    $("#loadModal").modal({
      keyboard: false,
      backdrop: 'static'
    });
    var url = "<%=basePath%>/img/upload";
    $.ajaxFileUpload({
      url: url,
      fileElementId: "filePath",//file标签的id,
      dateType: "text",
      success: function (data, status) {
        // - ajaxFileUpload这儿必须得转换以下
        data = jQuery.parseJSON(jQuery(data).text());
        if (data.code == 200) {
          var temp = data.data;
          $("#productImg").attr("src", temp.downloadUrl + '-580x350');
          $(".productImg").val(temp.downloadUrl);
        } else {
          alerErr(data.msg);
        }
        $("#loadModal").modal('hide');
      },
      error: function (data, status, e) {
        $("#loadModal").modal('hide');
        $("#filePath").replaceWith($("#upload").clone(true));
        alerErr(e);
      }
    });
  }

  function loadProductType() {
    var url = '<%=basePath%>/productType/list';
    $.post(url, function (data, status) {
      var item = '';
      for (var i = 0; i < data.length; i++) {
        item = '<option value="' + data[i].id + '">' + data[i].name + '</option>';
        $("#productType").append(item);
      }
    })
  }

  $(function () {
    if (!validateEmail('<%=email%>')) {
      return;
    }
    initStyle();
    loadProductType();
    $("button").click(function () {
      $(this).blur()
    });
    $("#productImg").mousemove(function () {
      $(this).css("cursor", "pointer");
    })
    $("#productImg").mouseout(function () {
      $(this).css("cursor", "default");
    })
    // - 上传图片
    $("#productImg").click(function () {
      $("#filePath").click();
    })
  })
</script>
</html>
